<template>
  <div>
    <span
      :class="`min ${size}`"
      contenteditable="true"
      @blur="onBlur"
      @input="onInput"
      @keyup.enter="onEnter"
    >
      {{value}}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    size :{
      type : String,
      default : 'mini'
    },
    value : String,
  },
   model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    onBlur (e) {
      this.$emit('blur', this.value);
    },

    onInput (e) {
      const v = `${this.value}${e.data ? e.data : ''}`
      this.$emit('change', v);
      this.$emit('input', v);
    },
    onEnter () {
      this.$emit('change', this.checked)
    },
  },
}
</script>

<style scoped>
  .min {
    min-width: 100px;
    min-height: 30px;
    display: inline-block;
    border: 1px solid #ccc;
  }
  .mini {
    min-width: 100px;
    min-height: 30px;
  }
  .small {
    min-width: 200px;
    min-height: 50px;
  }
  .large {
    min-width: 300px;
    min-height: 60px;
  }
</style>